<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>

	<style type="text/css">
		body{
		    padding: 0;
		    margin: 0;
		}

		.parent {
		  display: flex;
		  height: 300px; /* Or whatever */
		  background-color: black;
		}

		.child {
		  width: 100px;  /* Or whatever */
		  height: 100px; /* Or whatever */
		  margin: auto;  /* Magic! */
		  background-color: white;
		}
		ul {
		    margin: 0;
		    padding: 0;

		}

		li{
		    list-style: none;
		}

		.flex-container {
		    /* We first create a flex layout context */
		    display: flex;

		    /* Then we define the flow direction and if we allow the items to wrap 
		    * Remember this is the same as:
		    * flex-direction: row;主要用来创建主轴，从而定义了伸缩项目防止在伸缩容器的方向
		    * flex-wrap: wrap;主要用来定义伸缩容器里是单行还是多行显示，侧轴的方向决定了新行堆放的方向。
		    * flex-flow:row wrap;是“flex-direction”和“flex-wrap”属性的缩写版本。同时定义了伸缩容器的主轴和侧轴。
		    */
		    flex-flow: row wrap;
		    /* Then we define how is distributed the remaining space 用来定义伸缩项目沿着主轴线的对齐方式*/
		    justify-content: space-around;
		}
		.flex-item {
		    background: tomato;
		    padding: 5px;
		    width: 200px;
		    height: 150px;
		    margin-top: 10px;

		    line-height: 150px;
		    color: white;
		    font-weight: bold;
		    font-size: 3em;
		    text-align: center;
		}
	</style>
</head>
<body>
<div class="parent"><div class="child"></div></div>
 <ul class="flex-container">
        <li class="flex-item">1</li>
        <li class="flex-item">2</li>
        <li class="flex-item">3</li>
        <li class="flex-item">4</li>
        <li class="flex-item">5</li>
        <li class="flex-item">6</li>
   </ul>
	
</body>
</html>